<template>
  <div class="w-100">
    <ApldTable v-if="!showLoading" table-layout="auto" :pageSize="pageReac.size" :pageCurrent="pageReac.current"
      :columns="tableConfig.columns" :data="tableConfig.data">
      <template v-slot:menu="{ row }">
        <el-button text type="primary" @click="onDetail(row)"> 查看 </el-button>
      </template>
    </ApldTable>
    <AplidPaginate v-bind="pageReac" @change="onPageChange" class="pageinate" />

    <el-drawer v-model="drawer" title="服务对象信息变更" size="50%">
      <div class="flex align-center" v-show="rowColumn.length > 0">
        <span>您本次变更的是{{ changeType }}</span>
        <p>
          本次变更的数据有<span class="f18 text-black mg-6"> {{ rowColumn.length }} 条 </span>
        </p>
      </div>

      <el-scrollbar max-height="80vh" style="width: 100%">
        <div v-for="(item, index) in rowColumn" :key="index">
          <el-descriptions direction="vertical" style="border-bottom: 1px dotted rgb(72, 130, 161)">
            <el-descriptions-item :label="item.label" width="200">
              <content :item="item.before"></content>
            </el-descriptions-item>
            <el-descriptions-item width="60">变更为</el-descriptions-item>
            <el-descriptions-item width="200">
              <content :item="item.after"></content>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import { getAreaObj } from '@/utils/util'
import content from '../content.vue'
import { ApldTable, AplidPaginate } from '@/components/AplidCrud'
import { useConfig } from '@/views/datacenter/hooks/useConfig'
const { reloadLog, getFieldData } = useConfig()

const props = defineProps({
  batchNumber: {
    type: [String, Number],
  },
  changeType: {
    type: String,
  },
})
let pageReac = ref({
  total: 0,
  size: 5,
  current: 1,
})

const showLoading = ref(true)
const tableConfig: any = ref({
  rowKey: 'id',
  columns: [],
  data: [],
})
const rowColumn = ref([])
const drawer = ref(false)
const getValue = (data) => {
  if (!(data instanceof Object)) {
    return data
  }
}

const onDetail = (item) => {
  let changeList = []
  Object.keys(item.changeAfter).map((chi) => {
    changeList.push({
      label: chi,
      before: getValue(item.changeBefore[chi]),
      after: getValue(item.changeAfter[chi]),
    })
  })
  rowColumn.value = changeList
  drawer.value = true
}

const getTableFileld = (changeType, data) => {
  showLoading.value = true
  tableConfig.value.data = data
  getFieldData(changeType).then((res) => {
    let columnData: any = res || []
    tableConfig.value.columns = [
      ...columnData,
      {
        label: '操作',
        prop: 'menu',
        fixed: 'right',
      },
    ]
    showLoading.value = false
    reloadLog.value = Math.random()
  })
}
const getChangeContent = () => {
  if (props.batchNumber) {
    apiMod
      .view_dataChangeContent_page({
        dataChangeId: props.batchNumber,
        pageParaPO: {
          ...pageReac.value,
        },
      })
      .then((res) => {
        const data = res.data
        const dataItem = data.records[0] || {}
        pageReac.value.total = data.total
        let changeList = []
        const dataList = data.records.map((item) => {
          const changeAfter = JSON.parse(item.changeAfter || '{}')
          const changeBefore = JSON.parse(item.changeBefore || '{}')
          const changeData = JSON.parse(item.changeData || '{}')
          Object.keys(changeAfter).map((chi) => {
            changeList.push({
              label: chi,
              before: getValue(changeBefore[chi]),
              after: getValue(changeAfter[chi]),
            })
          })
          const crAreaName = getAreaObj(changeData, 'cr')
          const data = {
            ...changeData,
            crAreaName,
          }
          let tempObj = {
            ...item,
            changeAfter,
            changeBefore,
            changeData,
          }
          Object.entries(data).map((item) => {
            const key = item[0]
            const value = item[1]
            if (!(value instanceof Object)) {
              tempObj[key] = value
            }
          })
          return tempObj
        })
        // rowColumn.value = changeList;
        getTableFileld(dataItem.changeType, dataList)
      })
  }
}

const onPageChange = (page) => {
  pageReac.value = page
  getChangeContent()
}

onMounted(() => {
  getChangeContent()
})
</script>

<style scoped></style>
